<template>
  <dv-border-box-8 style="height: 255px; padding: 5px">
    <dv-decoration-7 style="height: 30px; text-align: center"
      >菜品排行</dv-decoration-7
    >
    <div id="chart2"></div>
  </dv-border-box-8>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      orderBy: 0,
    };
  },
  mounted() {
    this.get_list();
  },
  watch: {
    "$store.state.orderBy"(newVal) {
      this.orderBy = newVal;
      this.get_list();
    },
  },
  methods: {
    get_list() {
      this.$http.get(`/bill/dishRank?orderBy=${this.orderBy}`).then((res) => {
        const chartContainer = document.getElementById("chart2");
        echarts.dispose(document.getElementById("chart2"));
        const chart = echarts.init(chartContainer, null, {
          height: 255,
        });
        const names = res.data.map((item) => item.name).slice(0, 5);
        const customData = res.data.map((item) => item.totalCustom).slice(0, 5);
        const quantityData = res.data
          .map((item) => item.totalQuantity)
          .slice(0, 5);
        const option = {
          textStyle: {
            color: "#fff", // 设置全局字体颜色为红色
          },
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: ["销售额", "销售数量"],
            textStyle: {
              color: "#fff", // 设置全局字体颜色为红色
            },
          },
          xAxis: {
            type: "category",
            data: names,
          },
          yAxis: [
            {
              interval: 50,
              type: "value",
              name: "销售额",
              axisLabel: {
                formatter: "{value} 元",
              },
            },
            {
              interval: 50,
              type: "value",
              name: "销售数量",
              axisLabel: {
                formatter: "{value} 个",
              },
            },
          ],
          series: [
            {
              name: "销售额",
              type: "bar",
              data: customData,
            },
            {
              name: "销售数量",
              type: "bar",
              yAxisIndex: 1,
              data: quantityData,
            },
          ],
        };

        // 设置配置项并渲染图表
        chart.setOption(option);
        window.addEventListener("resize", function () {
          chart.resize();
        });
      });
    },
  },
};
</script>

<style>
</style>
